<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>新版发布任务</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <link rel="stylesheet" href="./css/push.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
	<script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
	<script src="../../../script/sortable.min.js" type="text/javascript"></script>
	<style>
		.assembly{background:#FFF;padding:0.25rem 0.3rem;padding-bottom:0.35rem;margin-top:0.13rem;}
		.step{background:#FFF;border-top:1px solid #F9F9F9;height:8rem;padding:0.25rem 0.3rem;-webkit-overflow-scrolling:touch;height:calc(100vh - 2.91rem);}
		._asscontent{display: -webkit-box;overflow-x: auto;-webkit-overflow-scrolling:touch;margin-top:0.4rem;margin-bottom:0.1rem;}
		._asscontent::-webkit-scrollbar {display: none;}
		._asscontent ._item{text-align:center;margin-right:0.3rem;}
		._asscontent ._item>div{} 
		._asscontent .collectImg {margin:0px auto;width:1.45rem;height:1rem;background: #F9F9F9;font-weight: 300;color: #B4B4B4;text-align: center;line-height: 0.36rem;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 0.24rem;}
		._asscontent .comImgWh{width: 1.45rem;height: 1rem;line-height: 1rem;background:#F9F9F9;text-align:center;}
		._asscontent .comImgWh img{width:0.44rem;vertical-align: middle;margin-top:-3px;}
		._asscontent .textBlock{width:2.6rem;}
		._asscontent .textBlock .select {height: 0.35rem;display: block;font-weight: 300;line-height: 0.35rem;text-align: center;padding: 0px 0.1rem;font-size: 0.21rem;color: #333;background:#FFF;}
		._asscontent ._selectIco {width: .13rem;height: .06rem;margin-left:0.1rem;}
		._asscontent .textBlock .select .title {overflow: hidden;display: flex;flex-direction: row;align-items: center;justify-content: center;}
		._asscontent .textBlock .select .title div {width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
		._asscontent .textBlock .inputs {margin-left: 0.12rem;height: 0.35rem;position: relative;text-align: center;}
		._asscontent .textBlock .inputs input {display: block;width: 100%;height: 0.35rem;font-weight: 300;font-size: 0.29rem;background: #FFF;line-height: .35rem;padding: 0 0.15rem;border-radius:0.03rem!important;}
		._asscontent .textbtn {font-weight: 300;margin-top: 0.1rem;color: #333;text-align:center;margin-right: 0.2rem;font-size: 0.21rem;height: 0.35rem;line-height:0.35rem;width:0.87rem;background:#FFF;}
		._asscontent ._textarea{height:1rem;background:#F9F9F9;padding:0.1rem;}
		._asscontent ._textarea textarea{background:#FFF;font-size:0.24rem;border-radius: 0.06rem;height:0.8rem;line-height:0.45rem;width:1.75rem;padding:0px 0.15rem;}
		._asscontent ._input{height:0.7rem;background:#F9F9F9;padding:0.1rem;}
		._asscontent ._input input{background:#FFF;height: 0.5rem;line-height:0.5rem;padding:0 0.15rem!important;width:1.75rem;font-size:0.24rem;border: 1px solid #F9F9F9!important;border-radius: 0.06rem;display: block;}
	</style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="assembly">
			<div class="ftitle">组件库</div>
			<div class="_asscontent" id="_asscontent">
				<div class="_item">
					<div class="collectImg">
						<span>收集<br/>用户截图</span>
						<font color="#3DA1FF" v-if="false">删除</font>
					</div>
				</div>
				<div class="_item">
					<div>
					    <div class="comImgWh">
							<img src="../../../image/push/add.png" />
						</div>
					</div>
				</div>
				<div class="_item">
					<div style="background:#F9F9F9;height:1rem;padding:0.1rem 0.15rem;">
					    <div class="textBlock disbox">
					        <div class="select ell">
					            <div class="title">
					                <div>文本</div>
					                <img class="_selectIco" src="../../../image/push/Triangle.png" />
					            </div>
					        </div> 
					        <div class="inputs disflex"> 
					            <input type="text" readonly />
					        </div>
					    </div>
					    <div class="textbtn">复制</div>
					</div>
				</div>
				<div class="_item">
					<div>
					    <div class="_textarea"><textarea placeholder="流程介绍" readonly></textarea></div>
					</div>
				</div>
				<div class="_item">
					<div>
						<div class="_input"><input type="text" placeholder="收集文本" readonly /></div>
					</div>
				</div>
			</div>
		</div>
		<div class="step">
			<div class="ftitle">步骤</div>
			<div id="_content">
				
				
				
			</div>
		</div>
    </div>
    <script>
		apiready = function() {
		    
		}
		var app = new Vue({
		    el:'#app',
		    data:{
		        iosTest:false,
		    },
		    mounted(){
				$.initJs(this);
		    },
		    methods:{
		       
		    },
		});
		
		new Sortable(_asscontent, {
			group: {
				name: 'shared',
				pull: 'clone' // To clone: set pull to 'clone'
			},
			animation: 150
		});
		
		new Sortable(_content, {
			group: {
				name: 'shared',
				pull: 'clone'
			},
			animation: 150
		});
	</script>  
</body>
</html>
